<template>
  <div class="create-resource">
    <div class="title"><span></span>资源信息</div>
    <el-form :model="resourceForm" :rules="rules" ref="resourceForm" label-width="100px" class="demo-form">
      <el-form-item label="资源编号" prop="sort">
        <el-input v-model.number="resourceForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="资源名称" prop="name">
        <el-input v-model="resourceForm.name"></el-input>
      </el-form-item>
      <el-form-item label="资源组" prop="code">
        <el-input v-model="resourceForm.code" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="资源路径" prop="url">
        <el-input v-model="resourceForm.url"></el-input>
      </el-form-item>
      <el-form-item label="add" prop="add">
        <el-select v-model="resourceForm.add" placeholder="请选择资源权限">
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in authEnum" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="资源描述" prop="des">
        <el-input type="textarea" v-model="resourceForm.des"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel" class="cancel-btn function-btn">取  消</el-button>
      <el-button type="primary" @click="sure('resourceForm')" class="function-btn">确  定</el-button>
    </div>
  </div>
</template>

<script>
import Config from '../../../../config'
export default {
  name: 'createResource',
  props: {
    form: {
      type: Object,
      default: function () {
        return {
          sort: -1,
          name: '',
          code: '',
          url: '',
          add: 0,
          des: ''
        }
      }
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      RESOURCE_INSERT: '资源新增',
      RESOURCE_EDIT: '资源编辑',
      resourceForm: JSON.parse(JSON.stringify(this.form)),
      rules: {
        sort: [
          { required: true, message: '请填写资源编号', trigger: 'blur' },
          {type: 'number', message: '资源编号必须为数字值', trigger: 'blur'}
        ],
        name: [
          { required: true, message: '请填写资源名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请填写资源编码', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请填写资源路径', trigger: 'blur' }
        ],
        add: [
          { required: true, message: '请选择资源权限', trigger: 'change' }
        ],
        des: [
          { required: true, message: '请填写资源描述', trigger: 'blur' }
        ]
      },
      authEnum: [
        {
          label: '允许',
          value: 0
        },
        {
          label: '禁止',
          value: 1
        }
      ]
    }
  },
  methods: {
    cancel () {
      this.$emit('hide', 'cancel')
    },
    sure (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.save()
        } else {
          this.$message(
            {
              message: '格式不正确',
              type: 'warning'
            }
          )
          return false
        }
      })
    },
    /**
     * 保存数据
     * */
    save () {
      let url = ``
      if (this.title === this.RESOURCE_INSERT) {
        url += `${Config.AUTH_URL}/Resource/insert`
      } else {
        url += `${Config.AUTH_URL}/Resource/update`
      }
      const param = this.resourceForm
      this.$http.post(url, param)
        .then(data => {
          console.log(data)
          this.$emit('hide', true)
        })
        .catch(e => {
          this.$emit('hide', false)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .create-resource {
    .title {
      color: #3C81FF;
      font-size: 14px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 20px;
      span {
        background-color: #3C81FF;
        width: 2px;
        height: 14px;
        margin-right: 8px;
      }
    }
    .dialog-footer {
      height: 28px;
      text-align: center;
      margin-top: 30px;
      .el-button {
        padding: 7px 27px;
      }
    }
  }
</style>
